<template>
	<view class="addassess">
		<div class="hd">
			<div class="t">
				<!-- <p>体检编号：{{   'medicalNo'   |  getUrlParam   }} </p> -->
				<p>体检时间：<picker mode="date" :start="start" :end="end"  @change="bindDateChange">
						<view class="date">{{medicalTime || '体检时间'}}</view>
					</picker>
				</p>
				<p>体检机构：<input type="text" v-model="medicalName"></p>
			</div>
		</div>
		<div class="bd">
			<div class="table" v-for="item in defaultData">
				<div class="title">{{item.sectionName}}</div>
				<wyb-table ref="table" :headers="headers" :contents="item.contents" @callbackdata="getcallbackdata" />
			</div>
			<div class="yc-warp">
				<div class="title"  @click="[dialog=true,type='yczb',getReportAbnormalPageAxios({pageIndex:pageIndex,pageSize:20})]">异常指标<span>载入异常</span></div>
				<table border="1" cellpadding="0" v-if="isCheckYcData.length > 0">
					<tr>
						<th colspan="2">名称</th>
					</tr>
					<tr v-for="(item,index) in isCheckYcData" :key="index">
						<td>{{item.name}}</td>
						<td @click="isCheckYcData.splice(index,1)">删除</td>
					</tr>
				</table>
			</div>
			<div class="dx-warp">
				<div class="title">单项数据体检<span @click="[dialog=true,type='dxsj',getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]">选择体检项目</span></div>
				<div v-if="isCheckDxData.length > 0">
					<wyb-table ref="table" :headers="dialogHeaders3" :contents="isCheckDxData" @callbackdata="dxgetcallbackdata" />
				</div>
			</div>
		</div>
		<div class="dialog" v-if="dialog">
			<div class="bg" @click="dialog = false"></div>
			<div class="content">
				<div class="search">
					项目名称：<input type="text" v-model="abnormalName"/>
					<span @click="onSearch">查询</span>
					<span @click="dialogSubmit">确认</span>
				</div>
				<wyb-table ref="table" :headers="type=='yczb'?dialogHeaders:dialogHeaders2" @onCheck="onCheck" :contents="dialogcontents" @callbackdata="getcallbackdata" width="91vw" height="60vh" enable-check="multiple" text-align="left" header-bg-color="#38CB97" header-ft-color="#fff" checker-border-color="#ccc" first-col-bg-color="#fff" checker-cell-bg-color="#fff" checker-box-bg-color="#fff"/>
				<div class="btn">
					<span 
						v-if="type=='yczb' && pageIndex != 1 || type!='yczb' && tiOption.pageIndex != 1" 
						@click="type=='yczb'?[pageIndex--,getReportAbnormalPageAxios({abnormalName:abnormalName,pageIndex:pageIndex,pageSize:20})]:[tiOption.pageIndex--,getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]">
					上一页</span>
					<span 
						v-if="type=='yczb' && pageIndex != totalCount || type!='yczb' && tiOption.pageIndex != tiOption.totalCount" 
						@click="type=='yczb'?[pageIndex++,getReportAbnormalPageAxios({abnormalName:abnormalName,pageIndex:pageIndex,pageSize:20})]:[tiOption.pageIndex++,getReportTemplateStencilPageAxios({pageIndex:tiOption.pageIndex,pageSize:20})]">
					下一页</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {getUrlParam} from '@/static/js/filter.js'
	export default {
		props:['userId'],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				abnormalName:'',
				data:{
					reportItemS:[]
				},
				headers: [{
					label: '名称',
					key:'name',
					width: 200
				}, {
					label: '结果',
					key:'input',
					width: 150
				}, {
					label: '参考值',
					key:'va',
					width: 200
				}, {
					label: '单位',
					key:'units',
					width: 200
				}],
				defaultData:[], //基础体检数据
				dialog:false,
				dialogcontents: [],
				dialogHeaders:[
					{
						label: '异常报告',
						key:'name',
						Wpercentage: '82vw'
					}
				],
				// 异常体检表头
				dialogHeaders2:[
					{
						label: '科室',
						key:'sectionName'
					},
					{
						label: '名称',
						key:'name'
					},
					{
						label: '参考范围',
						key:'va'
					},
					{
						label: '单位',
						key:'units'
					}
				],
				// 异常体检表头
				dialogHeaders3:[
					{
						label: '名称',
						key:'name',
						width: 200,
					},
					{
						label: '结果',
						key:'input',
						width: 150,
					},
					{
						label: '参考范围',
						key:'va',
						width: 200,
					},
					{
						label: '单位',
						key:'units',
						width: 200,
					}
				],
				isCheckYc:[],
				isCheckYcData:[], //选中的异常数据
				isCheckDx:[],
				isCheckDxData:[], //选中的单项数据
				beforeFilterData:[], //转换前的数据
				pageIndex: 1,
				totalCount:0,
				// 所有体检项目分页参数
				tiOption:{
					pageIndex:1,
					totalCount:0,
				},
				dxgetcallback:[],
				Type:'add',
				mid:'',
				medicalStatus:'',
				sex: '',
				medicalTime:'',
				medicalName:'',
				start: '',
				end: currentDate,
			}
		},
		mounted() {
			this.getReportTemplateStencilAxios()
			// this.getfindByMedicalAxios()
		},
		watch:{
			// medicalName(v){
			// 	this.medicalName = v
			// },
			// medicalTime(v){
			// 	this.medicalTime = v
			// },
			// defaultData(v){
			// 	v.map((a,ai)=>{
			// 		this.$refs.table[ai].contents = a
			// 	})
			// }
		},
		methods: {
			// 获取当前时间
			getDate(type) {
			   const date = new Date();
			   let year = date.getFullYear();
			   let month = date.getMonth() + 1;
			   let day = date.getDate();
			  
			   if (type === 'start') {
				year = year - 60;
			   } else if (type === 'end') {
				year = year + 2;
			   }
			   month = month > 9 ? month : '0' + month;;
			   day = day > 9 ? day : '0' + day;
			   return `${year}-${month}-${day}`;
			},
			// 日期
			bindDateChange(e) {  //日期选择
				this.medicalTime = e.target.value;
			},
			// 查询体检报告--或体检报告详情
			getfindByMedicalAxios(userId,reportNumber){
				const _this = this;
				var bArr = []
				_this.$api.findByMedical(userId,reportNumber).then((res)=>{
					_this.medicalTime = res.data.result.reportDate
					_this.medicalName = res.data.result.examinationOrgan
					_this.defaultData.map((a,ai)=>{
						const b = a.contents.map((b,bi)=>{
							const c = res.data.result.reportItemList.map((c,ci)=>{
								if(b.reportNo == c.itemId){
									b.value = c.itemValue
								}
								return c
							})
							_this.data.reportItemS.map((d,di)=>{
								if(d.itemId && d.itemId == b.reportNo){
									d.itemValue = b.value
								}
							})
							return b
						})
						bArr = bArr.concat(b)
						_this.defaultData[ai].contents = b
					})
					// 单项数据回显
					const result = bArr.map((a)=>{
						return a.reportNo
					})
					var isCheckDxDataArr = []
					res.data.result.reportItemList.map((c,ci)=>{
						let itemId = c.itemId
						if(result.indexOf(c.itemId) == -1){
							c.NewitemId = itemId
							c.checked = true
							c.sectionName = c.sectionName
							c.name = c.itemName
							c.value = c.itemValue
							c.units = c.itemUnit
							c.va = Number(c.minValue) == 0 && Number(c.maxValue) == 0 ? '':  Number(c.minValue).toFixed(2)+'~'+Number(c.maxValue).toFixed(2)
							isCheckDxDataArr.push(c)
						}
					})
					_this.isCheckDxData = isCheckDxDataArr
					_this.isCheckYcData = res.data.result.reportAbnormalList &&  res.data.result.reportAbnormalList.map((aa)=>{
						aa.name = aa.abnormalName
						aa.reportNo = aa.abnormalCode
						return aa
					}) || []
					// _this.Type = res.data.Result?'edit':'add'
					_this.mid = res.data.result && res.data.result.id
				})
			},
			// 选中的异常
			onCheck(e){
				let data = e.data.map((res)=>{return res.lineData})
				if(this.type == 'yczb'){
					this.isCheckYc = data
					console.log(data)
				}else{
					this.isCheckDx = data
				}
			},
			dialogSubmit(){
				if(this.type == 'yczb'){
					if(this.isCheckYcData.length <= 0){
						this.isCheckYcData = this.isCheckYc
					}else{
						const hasRepeat = this.isCheckYcData.filter((a,ai)=>{
							const arr = this.isCheckYc.filter((b,bi)=>{return b.name == a.name})
							return arr.length > 0
						})
						if(hasRepeat.length > 0){
							uni.showToast({title:'已有重复项',icon:'none'})
							return;
						}
						this.isCheckYcData = this.isCheckYcData.concat(this.isCheckYc)
					}
					this.dialog = false;
				}else{
					if(this.isCheckDxData.length <= 0){
						this.isCheckDxData = this.isCheckDx
					}else{
						const hasRepeat = this.isCheckDxData.filter((a,ai)=>{
							const arr = this.isCheckDx.filter((b,bi)=>{return b.name == a.name})
							return arr.length > 0
						})
						if(hasRepeat.length > 0){
							uni.showToast({title:'已有重复项',icon:'none'})
							return;
						}
						this.isCheckDxData = this.isCheckDxData.concat(this.isCheckDx)
					}
					this.dialog = false;
				}
			},
			onSearch(){
				this.pageIndex = 1
				this.getReportAbnormalPageAxios({abnormalName:this.abnormalName,pageIndex:this.pageIndex,pageSize:20})
			},
			// 获取所有体检项目
			getReportTemplateStencilPageAxios(data){
				uni.showLoading({title:'加载中...'})
				this.$api.getReportTemplateStencilPage(data).then((res)=>{
					uni.hideLoading()
					this.tiOption.totalCount = Math.ceil(res.data.result.totalCount / 20)
					this.dialogcontents = res.data.result.list.map((e)=>{
						e.name = e.itemName
						e.maxValue = e.maxVa
						e.minValue = e.minVa
						e.va = e.minVa+'~'+e.maxVa
						return e
					}).filter(b=>{
						if(this.sex == '男'){
							return b.itemName.indexOf('女') <= -1
						}else{
							return b.itemName.indexOf('男') <= -1
						}
					})
				})
			},
			// 获取所有异常
			getReportAbnormalPageAxios(data){
				uni.showLoading({title:'加载中...'})
				this.$api.getReportAbnormalPage(data).then((res)=>{
					uni.hideLoading()
					this.totalCount = Math.ceil(res.data.result.totalCount / 20)
					this.dialogcontents = res.data.result.list.map((e)=>{
						return {
							name:e.abnormalName,
							Wpercentage: '82vw',
							reportNo:e.abnormalCode
						}
					})
				})
			},
			getReportTemplateStencilAxios(){
				this.$api.getReportTemplateStencil().then((res)=>{
					this.beforeFilterData = res.data.result.map(a=>{
						a.itemId = a.reportNo;
						a.maxValue = a.maxVa
						a.minValue = a.minVa
						a.itemValue = ''
						return a;
					})
					let _e = this.beforeFilterData.filter((ae)=>{
						return ae.itemName.indexOf(this.sex == '男'?'女':'男') <= -1
					})
					this.beforeFilterData = _e;
					this.data.reportItemS = this.beforeFilterData;				
					this.filter(res.data.result)
					// this.getfindByMedicalAxios();
				})
			},
			// 数据分类转换
			filter(e){
				let _e = e.filter((ae)=>{
					return ae.itemName.indexOf(this.sex == '男'?'女':'男') <= -1
				})
				let arr = []
				_e.map((ev,i)=>{
					let hasIndex = arr.findIndex((av,ai)=>{  return av.sectionName == ev.sectionName})
					if(hasIndex > -1){
						arr[hasIndex].data.push(ev)
						arr[hasIndex].contents.push({name:ev.itemName,units:ev.units,va:Number(ev.minVa) == 0 && Number(ev.maxVa) == 0 ? '': Number(ev.minVa).toFixed(2)+'~'+Number(ev.maxVa).toFixed(2),reportNo:ev.reportNo})
					}else{
						arr.push({data:[ev],sectionName:ev.sectionName,contents:[{name:ev.itemName,units:ev.units,va:Number(ev.minVa) == 0 && Number(ev.maxVa) == 0 ? '':  Number(ev.minVa).toFixed(2)+'~'+Number(ev.maxVa).toFixed(2),reportNo:ev.reportNo}]})
					}
				})
				console.log(arr)
				this.defaultData = arr
			},
			getcallbackdata(e){
				let keyArr = Object.keys(e[0]).map((a)=>{
					return a
				})
				const reportItemS = this.beforeFilterData.map((a,ai)=>{
					e[1].map((c,ci)=>{
						if(c.value){
							if(c.reportNo == a.reportNo){
								a.itemValue = c.value
							}
						}
					})
					keyArr.map((b,bi)=>{
						if(a.reportNo == b){
							a.itemId = b;
							a.itemValue = e[0][b]
						}
					})
					return a
				})
				this.data.reportItemS = reportItemS
			},
			// 单项数据回调
			dxgetcallbackdata(e){
				let keyArr = Object.keys(e[0]).map((a)=>{
					return a
				})
				const reportItemS = e[1].map((a,ai)=>{
					keyArr.map((b,bi)=>{
						if(a.itemId == b){
							a.itemId = b;
							a.itemValue = e[0][b]
						}else if(a.reportNo == b){
							a.itemId = b;
							a.itemValue = e[0][b]
						}
					})
					return a
				})
				this.dxgetcallback = reportItemS
			},
			submit(){
				if(!this.userId){
					uni.showToast({
						title:'请选择会员！',
						icon:'none'
					})
					return;
				}
				if(!this.medicalTime){
					uni.showToast({
						title:'请选择体检时间！',
						icon:'none'
					})
					return;
				}
				if(!this.medicalName){
					uni.showToast({
						title:'请填写体检机构！',
						icon:'none'
					})
					return;
				}
				let reportItemS = this.dxgetcallback.length > 0?this.data.reportItemS.concat(this.dxgetcallback):this.data.reportItemS.concat(this.isCheckDxData)
				this.data.reportItemS = reportItemS.filter((ae)=>{
					return ae.itemName.indexOf(this.sex == '男'?'女':'男') <= -1
				})
				this.data.reportConclusionS = this.defaultData.map((e)=>{ return { checkTime: '' , sectionName: e.sectionName} })
				this.data.reportAbnormalS = this.isCheckYcData && this.isCheckYcData.map((e)=>{
					return {
						abnormalName:e.name,
						reportNo:e.reportNo
					}
				})
				this.data.reportItemS.map((a)=>{
					a.minVa = a.minVa+'' || '0.00'
					a.maxVa = a.maxVa+'' || '0.00'
					a.minValue = a.minValue+'' || '0.00'
					a.maxValue = a.maxValue+'' || '0.00'
				})
				this.data.id = this.userId
				this.data.examinationOrgan = this.medicalName
				this.data.reportDate = this.medicalTime
				this.data.status = 2
				this.$api.healthAddReport(this.data).then((res)=>{
					if(res.data.returnCode == 200){
						uni.showToast({title:'签发成功',icon:'none'})
					}else{
						uni.showToast({title:res.data.message,icon:'none'})
					}
				})
			},
			userChange(userId,reportNumber,sex){
				console.log(sex)
				this.sex = sex == 2 ? '女':'男',
				this.filter(this.beforeFilterData)
				if(reportNumber){
					this.getfindByMedicalAxios(userId,reportNumber)
					return;
				}
				// 查询用户最新数据
				this.getReportTemplateStencilAxios()
				this.medicalTime = ''
				this.medicalName = ''
				this.$api.Assessreport(userId).then((res)=>{
					if(res.data.result){
						// 有数据
						const reportNumber = res.data.result.reportNumber
						this.medicalTime = res.data.result.reportDate
						this.medicalName = res.data.result.medicalName
						if(reportNumber){
							this.getfindByMedicalAxios(userId,reportNumber)
						}
						// this.$refs.addassess.getfindByMedicalAxios(e.userId,res.data.result.reportNumber)
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.addassess{
		.title{
			padding:15upx 0;
			text-align: center;
			font-size: 28upx;
			color: #fff;
			background: #38CB97;
			position: relative;
			span{
				position: absolute;
				padding:8upx 12upx;
				background: #C0FEEF;
				right: 28upx;
				top: 8upx;
				color: #000;
				font-size: 26upx;
			}
		}
		.hd{
				padding:24upx 0;
				display: flex;
				justify-content: space-between;
				// position: fixed;
				// top: 84upx;
				// left: 0;
				// z-index: 100;
				width: 100%;
			.t{
				padding-left: 24upx;
				flex:1;
				font-size: 30upx;
				color: #333333;
				margin-top: 14upx;
				line-height: 66upx;
				p {
					display: flex;
					align-items: center;
					input,uni-picker {
						width: 329upx;
						height: 46upx;
						line-height: 46upx;
						border: 1upx solid #E4E4E4;
						border-radius: 6upx;
						padding-left: 10upx;
					}
				}
				
			}
			button{
				width: 132upx;
				height: 132upx;
				background: #38CB97;
				border-radius:16upx;
				color: #fff;
				line-height: 132upx;
				font-size: 30upx;
				margin-right: 24upx;
				&::after{
					border:none;
				}
			}
		}
	}
	.dialog{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		.bg{
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0,0,0,.5);
		}
		.content{
			padding:2vh 2vw;
			position: absolute;
			width: 91vw;
			height: 76vh;
			left: 2.5vw;
			top: 10vh;
			background: #fff;
			.wyb-table-header{
				width: 400upx !important;
			}
			.search{
				display: flex;
				font-size: 26upx;
				align-items: center;
				margin-bottom: 30upx;
				input{
					width: 200upx;
					height: 50upx;
					padding-left: 10upx;
					border: 1upx solid #ccc;
					border-radius: 8upx;
				}
				span{
					display: inline-block;
					padding: 8upx 18upx;
					border: 1upx solid #ccc;
					color: #000;
					margin-left: 20upx;
					border-radius: 8upx;
				}
			}
		}
		.btn{
			display: flex;
			justify-content: center;
			margin-top: 30upx;
			span{
				display: inline-block;
				margin: 0 20upx;
				width: 150upx;
				height: 40upx;
				text-align: center;
				line-height: 40upx;
				font-size: 26upx;
				border: 1px solid #ccc;
				border-radius:10upx;
			}
		}
	}
	.yc-warp,.dx-warp{
		margin-bottom: 20upx;
		table{
			width: 100%;
			text-align: left;
			border-collapse:collapse;
			font-size: 24upx;
			th{
				padding:12upx;
				background: #e6f3ff;
				color: #333;
			}
			td{
				padding:12upx;
			}
		}
	}
	.bd {
		// margin-top: 184upx;
	}
</style>
